var app = new Vue({
    el: '#app',
    data: {
        isAll: true,
        list: [{
            id: 1,
            name: 'iPhone7',
            price: 6188,
            count: 1,
            isrRadio: true,
        }, {
            id: 2,
            name: 'iPad Pro',
            price: 5888,
            count: 1,
            isrRadio: true,
        }, {
            id: 3,
            name: 'MacBook Pro',
            price: 21488,
            count: 1,
            isrRadio: true,
        }],
        catList: [{
            ctaName: "电子产品",
            list: [{
                id: 1,
                name: 'iPhone7',
                price: 6188,
                count: 1,
                isrRadio: true,
            }, {
                id: 2,
                name: 'iPad Pro',
                price: 5888,
                count: 1,
                isrRadio: true,
            }, {
                id: 3,
                name: 'MacBook Pro',
                price: 21488,
                count: 1,
                isrRadio: true,
            }]
        }, {
            ctaName: "水果",
            list: [{
                id: 4,
                name: '西瓜',
                price: 2,
                count: 1,
                isrRadio: true,
            }, {
                id: 5,
                name: '苹果',
                price: 5,
                count: 1,
                isrRadio: true,
            }, {
                id: 6,
                name: '香蕉',
                price: 2,
                count: 1,
                isrRadio: true,
            }]
        }]
    },
    methods: {
        handleReduce: function(index, id) {
            // if (this.catList[index].list[] === 1) return;
            // this.list[index].count--;

            this.catList.forEach(element => { // element 表示数组元素

                if (element.list[index].id === id) {
                    console.log(element.list[index].id);
                    if (element.list[index].count === 1) return;
                    element.list[index].count--;
                }
            })
        },
        handleAdd: function(index, id) {
            // console.log(index);
            // this.list[index].count++;
            this.catList.forEach(element => { // element 表示数组元素
                if (element.list[index].id === id) {
                    console.log(element.list[index].id);
                    element.list[index].count++;
                }
            });

        },
        handleRemove: function(Array, index) {
            Array.splice(index, 1);

            // console.log(index);
            // this.list.splice(index, 1);

            // this.catList.forEach(element => { // element 表示数组元素
            //     console.log(this.catList[index].list[xindex].id);

            //     console.log(this.catList[index].list.splice(xindex, 1));
            //     // element.splice(xindex, 1);
            // });

            // this.catList.forEach(element => { // element 表示数组元素
            //     // console.log(this.catList[index].list[xindex].id);

            //     // console.log(element.list[index].id === id);
            //     // console.log(id);
            //     if (element.list[index].id === id) {
            //         // console.log(element.list[index]);
            //         element.list.splice(index, 1);
            //     }

            //     // element.splice(xindex, 1);
            // });

            // for (var i = 0; i < this.catList.length; i++) {

            //     console.log(this.catList[index]);
            //     this.catList[index].list.splice(xindex, 0);
            // }
            // console.log(this.catList[index].list.length);
        },
        // 全选 
        hendleAll: function() {
            this.catList.forEach(element => {
                element.list.forEach(ele => {
                    ele.isrRadio = this.isAll;
                })
            });
        },
        // 单选
        hendleRadio: function() {
            var isFalse = true;
            this.catList.forEach(element => {
                element.list.forEach(ele => {
                    if (ele.isrRadio == false) {
                        isFalse = false;
                    }
                });
            });

            if (!isFalse) {
                this.isAll = false;
            } else {
                this.isAll = true;
            }
        }
    },
    computed: {
        totalPrice: function() {
            var total = 0;
            this.catList.forEach(element => {
                element.list.forEach(ele => {
                    if (ele.isrRadio) {
                        total += ele.price * ele.count;
                    };
                })
            });
            return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
            //   return total.toLocaleString();
        }
    }
})